<template>
  <div class="lgbox register">
    <!-- <video :src="videoSrc" class="myvideo" autoplay muted loop></video> -->
    <div class="login-box">
      <h2 class="title">欢迎注册</h2>
      <div class="box">
        <!-- model:表单数据对象。status-icon：是否在输入框中显示校验结果反馈图标 。rules：表单验证规则。label-width：标签的长度 -->
        <el-form
          ref="myForm"
          :model="form"
          status-icon
          :rules="rules"
          label-width="120px"
          class="myform"
        >
          <!-- label:标签文本，prop：model的键名 -->
          <el-form-item label="用户名称" prop="username">
            <!-- prefix-icon	自定义前缀图标。autocomplete：根据之前的输入来自动完成 -->
            <el-input
              :prefix-icon="User"
              v-model="form.username"
              placeholder="用户名"
              type="text"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input
              :prefix-icon="Iphone"
              v-model="form.phone"
              placeholder="手机号码"
              type="text"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="登录密码" prop="password">
            <!-- @blur="checkpasswordBlur"  -->
            <el-input
              :prefix-icon="Lock"
              v-model="form.password"
              placeholder="登录密码"
              show-password
              type="password"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="确认密码" prop="dbpass">
            <el-input
              :prefix-icon="Lock"
              v-model="form.dbpass"
              placeholder="确认密码"
              show-password
              type="password"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item class="lastitem">
            <div class="alinks">
              <router-link to="/login" class="litem">去登录</router-link>
              <router-link to="/findpass" class="litem bg"
                >忘记密码</router-link
              >
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              class="btnblock"
              @click="submitData(myForm)"
              >注册账号</el-button
            >
            <el-button type="danger" class="btnblock" @click="resetForm(myForm)"
              >重置数据</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { User, Lock, Iphone } from "@element-plus/icons-vue";
import { ref, reactive, onMounted } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { reg } from "@/utils/validate";
import { ElMessage } from "element-plus";
import { Ajax } from "@/api";
import { useRouter } from "vue-router";
const router = useRouter();

const myForm = ref<FormInstance>(); // ref 对象
const form = reactive({
  // 表单的数据
  username: "",
  phone: "",
  password: "",
  dbpass: "",
  role: 0, // 普通账号
});

const checkDbPass = (rule: any, value: any, callback: any) => {
  if (value !== form.password) {
    callback(new Error("两次密码不匹配"));
  } else {
    callback();
  }
};

const checkpassword = (rule: any, value: any, callback: any) => {
  // 不需要验证原密码通过验证，因为你输入完原密码，失焦的时候会自动校验
  myForm.value.validateField("dbpass", () => {
    callback();
  }); //唤起dbpass的密码正则
  //    先这样然后看能不能解决红色
};

const rules = reactive<FormRules>({
  username: [
    {
      required: true,
      message: "请输入用户名",
      trigger: "blur",
    },
  ],
  phone: [
    {
      required: true,
      message: "请输入手机号",
      trigger: "blur",
    },
    {
      pattern: reg.phone,
      message: "请输入正确格式的手机号码",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
    {
      pattern: reg.pwd,
      message: "请输入6-16位的数字和字母组合的密码",
      trigger: "blur",
    },
    {
      validator: checkpassword,
      trigger: "blur",
    },
  ],
  dbpass: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
    {
      pattern: reg.pwd,
      message: "请输入6-16位的数字和字母组合的密码",
      trigger: "blur",
    },
    {
      validator: checkDbPass,
      trigger: "blur",
    },
  ],
});
const resetForm = (myForm: FormInstance | undefined) => {
  if (!myForm) return;
  myForm.resetFields();
};
// myForm是一个形参，可以是任意名字
const submitData = (myForm: FormInstance | undefined) => {
  if (!myForm) return; //如果不为空
  myForm.validate(async (valid) => {
    //   valid是一个布尔值
    if (valid) {
      let res = await Ajax.register(form); //把表单的东西提交给后台，在数据库生成一个新用户
      if (res.code == 200) {
        router.push({ name: "login", query: form });
      }
    } else {
      ElMessage.error("注册数据校验失败！");
    }
  });
};
</script>

<style></style>
